<!--
    This page contains the form "Ceiling"
    with a Javascript method that can enable the year of renovation.
-->

<script type="text/javascript">
    function visibleCeiling(){
        if(document.getElementById('changedCeiling').checked){
            document.getElementById('yearChangedCeiling').removeAttribute('readonly');
            document.getElementById('changedCheckedCeiling').style.color="black";
        }
        else{
            document.getElementById('yearChangedCeiling').setAttribute('readonly', 'readonly');
            document.getElementById('changedCheckedCeiling').style.color="grey";
        }
        displayCeilingFloor();
    }
    
    function modifyAreaCeiling(){
        var modif = document.getElementById("modifAreaCeiling");

        if(modif.checked){

        document.getElementById('ceilingAreaId').removeAttribute('readonly');
        }
        else{
        document.getElementById('ceilingAreaId').setAttribute('readonly', 'readonly');
        
        displayCeilingFloor();
    }
}
</script> 
<p id="subtitle"><?php echo TXT_SUBMENU_CEILING; ?> <img id="tooltip" src="../images/help.png" title="<?php echo TXT_HELP_CEILING; ?>" /></p>
<div style="background-color: #f2f2f2; margin : 10px; padding : 20px; border-radius: 10px; Box-shadow: 2px 2px 8px 1px rgba(0,0,0,0.4);">
<div>
   
    <label id="ceilingEqualsRoofDesc"><?php echo TXT_CEILING_EQUALS_FLOOR_DESC; ?></label>
    <br />
    <img src="../images/forms/ceiling/ceilingRoof.png" id="ceilingPicture" />
    
</div>

<table id="ceilingTab">
    <tr>
        <th style="text-align: left;  vertical-align: top;">
            <br>
            <?php echo TXT_AREA; ?>
        </th>
        <td>
            <br>
            <input type="number" name="ceilingArea" id="ceilingAreaId" readonly /> m² <input id="modifAreaCeiling" type="checkbox" onclick="modifyAreaCeiling();" disabled/><span id="changedCeilingDesc" style="color: grey"><?php echo TXT_DIMENSION_EDIT; ?></span></div>
        </td>
    </tr>
    <tr>
        <th style="text-align: left;  vertical-align: top;">
            <br>
            <?php echo TXT_CHANGED_CEILING; ?>
            <input type="checkbox" id="changedCeiling" name="changedCeiling" onclick="visibleCeiling()" disabled/>
        </th>
        <td>
            <br>
            <span id="changedCheckedCeiling"><?php echo TXT_CHANGED_YEAR; ?></span>
            <input type="date" id="yearChangedCeiling" name="yearChangedCeiling" readonly />
        </td>  
    </tr>
</table>
</div>